import React from 'react';
import { View, Text, Button } from 'react-native';

export default function App() {

  return (
    <View>
      <Text>===</Text>
      <Child
        header={<Button title="父亲的按钮1" />}
        content={<Text style={{ color: 'red' }}>内容</Text>}
        footer={<Text style={{ color: 'blue' }}>底部</Text>}
      />
      <Text>===</Text>
    </View>
  );
}

// 自组件
function Child({ header, content, footer }: {
  header: React.ReactNode,
  content: React.ReactNode,
  footer: React.ReactNode
}) {
  return (
    <View>
      {/*头部*/}
      <View>
        <Text>头部￥￥￥</Text>
        {header}
        <Text>头部￥￥￥</Text>
      </View>

      {/*内容*/}
      <View>
        <Text>内容！！！</Text>
        {content}
        <Text>内容！！！</Text>
      </View>

      {/*底部*/}
      <View>
        <Text>底部？？？</Text>
        {footer}
        <Text>底部？？？</Text>
      </View>
    </View>
  );
}



